<template>
  <a-table
    ref="tableRef"
    class="table"
    v-bind="$attrs"
    :pagination="false"
    :stripe="true"
  >
    <template v-for="(_, slot) in $slots" :key="slot" #[slot]="slotProps">
      <slot :name="slot" v-bind="slotProps"></slot>
    </template>
  </a-table>
  <div class="page-position">
    <a-pagination
      :total="total"
      :current="pageNum"
      :page-size="pageSize"
      show-total
      show-jumper
      show-page-size
      @change="change"
      @update:page-size="changeSize"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const tableRef = ref();
const total = ref<number>(0);
const pageNum = ref<number>(1);
const pageSize = ref<number>(10);
function change(e: number) {
  pageNum.value = e;
}
function changeSize(e: number) {
  pageSize.value = e;
}
const tableProxy = new Proxy(
  {},
  {
    get(target, key) {
      return tableRef.value?.[key];
    },
    has(target, key) {
      return key in tableRef.value;
    },
  }
);
defineExpose({ total, pageNum, pageSize, tableProxy });
</script>

<style scoped>
.table {
  white-space: nowrap;
}
.page-position {
  margin-top: 12px;
  margin-bottom: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
